<template>
  <div class="left">
    <Card style="width:100%">
      <Row class="account">
        <Col span="24">{{userInfo.id}}</Col>
      </Row>
      <Row class="state">
        <Col class="valiatestate" span="11">{{authorState}}</Col>
        <Col class="split" span="1">|</Col>
        <Col class="levelstate" span="11">{{evaluatorState}}</Col>
      </Row>

      <Button class='loginout' @click="exit">退出登录</Button>

    </Card>
    <Menu style="width:100%;" theme="light" active-key="1" @on-select="selectMenu">
      <Menu-item key="1" name='1'>
        <Icon type="ios-person" size='20'></Icon>
        账号信息
      </Menu-item>
      <Menu-item key="2" name='2'>
        <Icon type="ios-people" size='20'></Icon>
        安全中心
      </Menu-item>
      <Menu-item key="3" name='3'>
        <Icon type="ios-people" size='20'></Icon>
        机构认证
      </Menu-item>
      <Menu-item key="4" name='4'>
        <Icon type="ios-paper" size='20'></Icon>
        申请评级
      </Menu-item>
    </Menu>

  </div>
</template>

<script>
// @ is an alias to /src
import { Component, Vue, Emit, Prop } from 'vue-property-decorator'

@Component
export default class Left extends Vue {
  @Prop({ type: Boolean, default: false }) value;

  // bindSend 为父组件引用子组件上 绑定的事件名称
  @Emit('bindSelect')
  selectMenu(msg) {
    // console.log('msg', msg)
    return msg
  }

  exit() {
    this.$store.commit('session/logout')
    // console.log('token', this.$store.getters['session/token'])
    this.$router.push('../')
    this.$router.go()
  }

  get authorState() {
    const authorStates = this.$store.state.session.authorStates
    let authorState = ''
    if (authorStates && authorStates.authorState !== undefined) {
      switch (authorStates.authorState) {
        case 0:
          authorState = '未认证'
          break
        case 1:
          authorState = '认证中'
          break
        case 2:
          authorState = '已认证通过'
          break
        case 3:
          authorState = '认证未通过'
          break
      }
    }
    return authorState
  }

  get evaluatorState() {
    const evaluatorStates = this.$store.state.session.evaluatorStates
    console.log('evaluatorStates', evaluatorStates)
    let evaluatorState = ''
    if (evaluatorStates && evaluatorStates.evaluation_state !== undefined) {
      switch (evaluatorStates.evaluation_state) {
        case 0:
          evaluatorState = '未测评'
          break
        case 1:
          evaluatorState = '未提交'
          break
        case 2:
        case 3:
          evaluatorState = '待测评'
          break
        case 4:
          evaluatorState = '待终审'
          break
        case 5:
          evaluatorState = '测评未通过'
          break
        case 6:
          evaluatorState = '测评已通过'
          break
        default:
          evaluatorState = '未测评'
          break
      }
    }
    return evaluatorState
  }

  get userInfo() {
    return this.$store.getters['session/user']
  }
}

</script>
<style lang='less' scoped>
.left {
  text-align: left;
  font-size: 1.2rem;

  height: 100%;
  background: #fff;
}
.account {
  text-align: center;
  font-size: 1.6rem;
}
.state {
  margin-top: 0.2rem;
  font-size: 1.2rem;
  color: #aaa;
}
.valiatestate {
  text-align: right;
}
.levelstate {
  text-align: left;
}
.split {
  text-align: center;
}
.loginout {
  margin-top: 1rem;
  width: 100%;
  color: #666;
  border: solid 1px #ddd;
}
.menu {
  width: 300px;
}
</style>
